<template>
	<div class="bg">
		<goback :title="title"></goback>
		<div class="box">
			<textarea v-model="feedbackText" placeholder="请输入您的意见或建议..."></textarea>
		<button @click="submitFeedback">提交</button>
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				feedbackText:'',
				title:"意见反馈"
			}
		},
		methods: {
			submitFeedback() {
				
				if(this.getStorage("token") == null){
					this.$toast.showMessage("请先登入~");
					return;
				}
				
				
				if(this.feedbackText==null || this.feedbackText.trim() == ''){
					this.$toast.showMessage("请填写您的建议哦~");
					return;
				}
				
				
				// 清空文本框
				this.$toast.showMessage("感谢您宝贵的建议!");
				this.axios.post(`${this.IP}/submit_advise`, {
						token: this.getStorage("token"),
						content: this.feedbackText
				}).then(res => {
					this.$toast.showMessage(res.data);
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
				
				
				this.feedbackText = '';
				
				setTimeout(function(){
					this.$router.go(-1);
				},1500)
				
				
			}
		}
	}
</script>

<style scoped>

	.feedback-container {
		max-width: 600px;
		margin: 0 auto;
		background-color: #fff;
		padding: 30px;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	.box{
		position: relative;
		width: 100%;
		height: 300px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 4vw;
	}
	textarea {
		width: 80%;
		height: 200px;
		padding: 10px;
		box-sizing: border-box;
		border: 1px solid #ccc;
		border-radius: 4px;
		resize: none;
	}

	button {
		position: absolute;
		bottom: 2vw;
		right: 10vw;
		display: block;
		width: 20%;
		padding: 12px;
		margin-top: 20px;
		background-color: #007bff;
		color: #fff;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 4vw;
	}

	button:hover {
		background-color: #0056b3;
	}
</style>